<template>
  <TopNav title="费用记录"/>
  <div class="container">
    <div class="cost-list">
      <el-card class="cost-item" v-for="(item,index) in dataList.list" :key="index">
        <div class="number">￥<span>{{ item.costNumber }}</span></div>
        <p>{{ item.costDesc }}</p>
        <div>
          <el-button class="button" type="success" round size="small">{{ item.paymentMethod }}</el-button>
        </div>
        <div>
          <el-button class="button" type="warning" round size="small">是否支付：{{ item.isPaid }}</el-button>
        </div>
        <div class="patient">
          <span v-for="item2 in patientList.list" :key="item2.patientId">
          {{ item.patientId == item2.patientId ? item2.patientName : '' }}
        </span>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import costAxios from "@/api/cost.js"
import patientAxios from "@/api/patient.js"
import {useDataStore} from "@/stores/dataStore.js";
import {useRoute, useRouter} from 'vue-router'
import {onMounted, reactive, ref} from "vue";
import TopNav from "@/components/TopNav/Back.vue"

const route = useRoute()
//route.params.name;
const router = useRouter()
const dataStore = useDataStore()

//初始化分页查询数据
const dataList = reactive({
  list: []
})
const patientList = reactive({
  list: []
})
//初始化总条数
const totalData = ref(0)
//当前页
const currentPage = ref(1)
//初始化分页显示条数
const defaultPageSize = ref(10)
//搜索初始化状态
const searchInfo = ref("")
onMounted(() => {
  http_cost()
  http_patient_findAll()
})
/**
 * 分页查询消费记录
 */
const http_cost = () => {
  costAxios.cost_search({
    search: searchInfo.value,
    page: currentPage.value,
    size: defaultPageSize.value
  }).then(res => {
    if (res.data.code == 200) {
      dataList.list = res.data.data.records
      totalData.value = res.data.data.total
    } else {
      ElMessage.error(res.data.message)
    }

  })
}
/**
 * 查询所有患者
 */
const http_patient_findAll = () => {
  patientAxios.patient_findAll().then(res => {
    if (res.data.code == 200) {
      patientList.list = res.data.data
    }
  })
}
</script>

<style scoped lang="scss">
.cost-list {
  .cost-item {
    .number {
      color: red;
      font-size: 13px;
      font-weight: bolder;

      span {
        font-size: 17px;
      }
    }

    p {
      opacity: .8;
      line-height: 22px;
      margin-top: 5px;
      margin-bottom: 5px;
    }

    .button {
      margin: 5px;
    }
    .patient{
      margin-left: 90%;
      opacity: .6;
    }
  }
}
</style>
